<template>
  <div class="menu-management">
    <div class="page-container">
      <div class="table-toolbar">
        <div class="toolbar-left">
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增菜单
          </el-button>
          <el-button @click="handleExpandAll">
            <el-icon><Expand /></el-icon>
            展开全部
          </el-button>
          <el-button @click="handleCollapseAll">
            <el-icon><Fold /></el-icon>
            折叠全部
          </el-button>
        </div>
        
        <div class="toolbar-right">
          <el-input
            v-model="searchForm.keyword"
            placeholder="请输入菜单名称"
            style="width: 200px; margin-right: 10px"
            @keyup.enter="handleSearch"
          >
            <template #append>
              <el-button @click="handleSearch">
                <el-icon><Search /></el-icon>
              </el-button>
            </template>
          </el-input>
          <el-button @click="handleRefresh">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </div>
      
      <el-table
        v-loading="loading"
        :data="tableData"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :default-expand-all="defaultExpandAll"
        stripe
        border
      >
        <el-table-column prop="name" label="菜单名称" width="200">
          <template #default="{ row }">
            <el-icon v-if="row.icon" style="margin-right: 8px">
              <component :is="row.icon" />
            </el-icon>
            {{ row.name }}
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路由路径" width="200" />
        <el-table-column prop="component" label="组件路径" width="200" />
        <el-table-column prop="sort" label="排序" width="100" />
        <el-table-column prop="visible" label="显示状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.visible ? 'success' : 'danger'">
              {{ row.visible ? '显示' : '隐藏' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button type="success" size="small" @click="handleAddChild(row)">
              新增子菜单
            </el-button>
            <el-button type="danger" size="small" @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Menu } from '@/types'

const loading = ref(false)
const tableData = ref<Menu[]>([])
const defaultExpandAll = ref(true)

const searchForm = reactive({
  keyword: ''
})

// 模拟数据
const mockMenus: Menu[] = [
  {
    id: 1,
    name: '仪表盘',
    path: '/dashboard',
    icon: 'Odometer',
    component: 'Dashboard',
    sort: 1,
    visible: true,
    createTime: '2025-01-01 10:00:00',
    updateTime: '2025-01-01 10:00:00'
  },
  {
    id: 2,
    name: '系统管理',
    path: '/system',
    icon: 'Setting',
    sort: 2,
    visible: true,
    children: [
      {
        id: 21,
        name: '用户管理',
        path: '/system/user',
        icon: 'User',
        component: 'system/User',
        parentId: 2,
        sort: 1,
        visible: true,
        createTime: '2025-01-01 10:00:00',
        updateTime: '2025-01-01 10:00:00'
      },
      {
        id: 22,
        name: '角色管理',
        path: '/system/role',
        icon: 'UserFilled',
        component: 'system/Role',
        parentId: 2,
        sort: 2,
        visible: true,
        createTime: '2025-01-01 10:00:00',
        updateTime: '2025-01-01 10:00:00'
      },
      {
        id: 23,
        name: '菜单管理',
        path: '/system/menu',
        icon: 'Menu',
        component: 'system/Menu',
        parentId: 2,
        sort: 3,
        visible: true,
        createTime: '2025-01-01 10:00:00',
        updateTime: '2025-01-01 10:00:00'
      }
    ],
    createTime: '2025-01-01 10:00:00',
    updateTime: '2025-01-01 10:00:00'
  }
]

// 获取菜单列表
const fetchMenuList = async () => {
  try {
    loading.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    
    let filteredData = mockMenus
    
    if (searchForm.keyword) {
      filteredData = filterMenus(mockMenus, searchForm.keyword)
    }
    
    tableData.value = filteredData
  } catch (error: any) {
    ElMessage.error(error.message || '获取菜单列表失败')
  } finally {
    loading.value = false
  }
}

// 递归过滤菜单
const filterMenus = (menus: Menu[], keyword: string): Menu[] => {
  return menus.filter(menu => {
    const match = menu.name.includes(keyword)
    if (menu.children) {
      const filteredChildren = filterMenus(menu.children, keyword)
      if (filteredChildren.length > 0) {
        return { ...menu, children: filteredChildren }
      }
    }
    return match
  })
}

// 搜索
const handleSearch = () => {
  fetchMenuList()
}

// 刷新
const handleRefresh = () => {
  fetchMenuList()
}

// 新增菜单
const handleAdd = () => {
  ElMessage.info('新增菜单功能开发中...')
}

// 编辑菜单
const handleEdit = (row: Menu) => {
  ElMessage.info(`编辑菜单 "${row.name}" 功能开发中...`)
}

// 新增子菜单
const handleAddChild = (row: Menu) => {
  ElMessage.info(`为菜单 "${row.name}" 新增子菜单功能开发中...`)
}

// 删除菜单
const handleDelete = async (row: Menu) => {
  try {
    await ElMessageBox.confirm(`确定要删除菜单 "${row.name}" 吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    ElMessage.success('删除成功')
    fetchMenuList()
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error(error.message || '删除失败')
    }
  }
}

// 展开全部
const handleExpandAll = () => {
  defaultExpandAll.value = true
}

// 折叠全部
const handleCollapseAll = () => {
  defaultExpandAll.value = false
}

onMounted(() => {
  fetchMenuList()
})
</script>

<style lang="scss" scoped>
.menu-management {
  .table-toolbar {
    .toolbar-left {
      display: flex;
      gap: 10px;
    }
    
    .toolbar-right {
      display: flex;
      align-items: center;
    }
  }
}
</style>

